<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div class="dv" v-if="num==10">v-if</div>
      <div v-else-if="num==11">v-else-if 11</div>
      <div v-else-if="num==12">v-else-if 12</div>
      <div v-else-if="num==13">v-else-if 13</div>
      <div v-else>v-else</div>
      <div class="dv" v-show="num==10">v-show</div>
    </div>
  </body>
</html>
<script src="./vue.js"></script>
<script>
  // 控制视图的现实和隐藏
  // 接受的表达式是一个布尔值，如果true那么元素显示，如果false，那么元素不显示
  // v-if 会移除dom结构
  //   v-else 没有表达式（不用赋值） 如果v-if为true v-else不显示 如果v-if为false 那么v-else就会显示
  //   v-else-if
  // v-show  只是通过css控制 display：none

  //   使用场景
  // 1.频繁切换 使用v-show
  // 2.如果初次开销较大 使用v-if
  const vm = new Vue({
    el: "#app",
    data: {
      isShow: true,
      num: 10,
    },
  });
</script>
